* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

@keyframes tip{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.web { 
    font-size: 26px;
    width: 100%;
    height: 100%;
    >div {
        width: 100%;
        height: 100%;
        position: fixed;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        left: 0;
        top: 0;
        text-align: center;
    }
    .first-page{
        background-color: skyblue;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        >div{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
        }
        // display: none;
    }
    .first-page~div {
        display: none;
        justify-content: center;
    }

    .second-page {
        // display: flex !important;
        background-color: pink;
        .list{
            width: 80%;
            box-shadow: 0 0 20px white;
            max-height: 400px;
            overflow: auto;
            padding: 0 40px;
            li{
                margin: 20px 0;
                display: flex;
                justify-content: space-between;
            }
        }
        .tip{
            width:200px;
            height: 90px;
            line-height: 90px;
            background-color: antiquewhite;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
        .tip-active{
            display: block;
            animation: tip 2s forwards;
        }
    }
}




